<template>
  <div class="middleDv">
    <middleTop />
    <div class="middleBottom">
      <div
        class="box floating-element"
        v-for="item in bottomList"
        :key="item.text"
      >
        <div class="num" :style="{ paddingRight: item.unit ? '15px' : '21px' }">
          {{ item.num }}<span v-if="item.unit"> {{ item.unit }}</span>
        </div>
        <div class="title b">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { sixData } from "@/api/serve";
import middleTop from "./middleTop";
export default {
  name: "MiddleDv",
  props: {},
  components: {
    middleTop,
  },
  data() {
    return {
      bottomList: [
        {
          text: "中心受理率",
          num: "0",
          unit: "%",
        },
        {
          text: "超时办结率",
          num: "0",
          unit: "%",
        },
        {
          text: "问题办结率",
          num: "0",
          unit: "%",
        },
        {
          text: "重发复发率",
          num: "0",
          unit: "%",
        },
        {
          text: "办理满意率",
          num: "0",
          unit: "%",
        },
        {
          text: "案例库",
          num: "0",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      sixData().then((res) => {
        const d = res.data.result;
        this.bottomList[0].num = d.platHandledPresent;
        this.bottomList[1].num = d.overduePresent;
        this.bottomList[2].num = d.allHandledPresent;
        this.bottomList[3].num = d.relapsePresent;
        this.bottomList[4].num = d.satisfactionPresent;
        this.bottomList[5].num = d.commonQuestionResultCount;
      });
    },
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.init();
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.middleDv {
  width: 100%;
  height: calc(100% - 22px);
  position: relative;
  .middleTop {
    margin: 22px 47px;
    background-image: url("../assets/middleTop.png");
    background-size: 100% 100%;
    height: 102px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    img {
      margin-top: 30px;
    }
    .grids {
      margin-left: 48px;
      display: flex;
      .grid {
        width: 58px;
        height: 82px;
        margin-right: 15px;
        background-image: url("../assets/grid.png");
        background-size: 100% 100%;
        font-family: YouSheBiaoTiHei;
        font-size: 46px;
        color: #01fffe;
        line-height: 82px;
      }
    }
  }
  .middleBottom {
    position: absolute;
    bottom: 85px;
    left: 50px;
    right: 30px;
    display: flex;
    align-items: flex-end;
    .box {
      width: 240px;
      height: 219px;
      background-image: url("../assets/box.png");
      .b {
        padding-right: 22px;
      }
      .num {
        font-size: 46px;
        color: #01fffe;
        padding-top: 32px;
        span {
          font-size: 20px;
        }
      }
      .title {
        font-size: 22px;
        color: #ffffff;
        line-height: 29px;
        margin-top: 2px;
      }
    }
    & > div:nth-child(2),
    & > div:nth-child(5) {
      margin-bottom: 49px;
    }
    & > div:nth-child(1),
    & > div:nth-child(6) {
      margin-bottom: 120px;
    }
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.floating-element {
  display: inline-block;
  animation: float 3s infinite;
}
</style>
